<template>
  <!--TODO: 默认图片在 cos 上添加 -->
  <movable-area
    v-if="conversation.conversationID"
    class="t-conversation-item-container"
  >
    <movable-view
      class="t-conversation-item"
      direction="horizontal"
      @change="handleTouchMove"
      damping="100"
      :x="xScale"
    >
      <view class="avatar-box">
        <image
          class="t-conversation-item-avatar"
          :src="
            conversation.userProfile.userID !== '@hui#system'
              ? conversationAvatar
              : staticUrl + '/static/huirencai/appimgs/system-tips-icon.png'
          "
          @error="handleImageError"
        >
        </image>
        <view class="unread" v-show="conversation.unreadCount != 0">
          <view class="read-text">{{
            conversation.unreadCount == 0
              ? ""
              : conversation.unreadCount - 0 < 99
              ? conversation.unreadCount
              : "99+"
          }}</view>
        </view>
      </view>
      <view class="t-conversation-item-content">
        <label class="tui-conversation-item-name">
          <view class="textlinclamp" style="padding-right: 22rpx">
            {{ conversationName }}
            <slot name="slotname"></slot>
          </view>
        </label>
        <view
          class="tui-conversation-lastMessage"
          v-if="conversation.userProfile.userID !== '@hui#system'"
        >
          <text>{{ messageForShow }}</text>
        </view>
      </view>
      <view class="t-conversation-item-info">{{ timeago }}</view>
      <!--    <view class="t-conversation-delete" @tap.stop="deleteConversation">删除</view>-->
    </movable-view>
  </movable-area>
</template>

<script>
import { caculateTimeago } from "../../base/common";
import { domain } from "@/common/api/config";
export default {
  data() {
    return {
      xScale: 0,
      staticUrl: domain.staticUrl,
    };
  },
  created() {},
  computed: {
    conversationName() {
      return this.getConversationName(this.conversation);
    },
    conversationAvatar() {
      return this.setConversationAvatarHandler(this.conversation);
    },
    messageForShow() {
      const lastMessage = this.conversation.lastMessage;
      if (
        lastMessage &&
        lastMessage.messageForShow &&
        lastMessage.messageForShow.length > 0
      )
        return lastMessage.messageForShow.slice(0, 15);
      return "";
    },
    timeago() {
      const lastMessage = this.conversation.lastMessage;
      if (lastMessage && lastMessage.lastTime)
        return caculateTimeago(this.conversation.lastMessage.lastTime * 1000);
      return "";
    },
  },
  props: {
    conversation: {
      type: Object,
      default: () => {},
    },
  },

  methods: {
    // 先查 remark；无 remark 查 (c2c)nick/(group)name；最后查 (c2c)userID/(group)groupID
    getConversationName(conversation) {
      if (conversation.type === "@TIM#SYSTEM") {
        return "系统通知";
      }

      if (conversation.type === "C2C") {
        return (
          conversation.remark ||
          conversation.userProfile.nick ||
          conversation.userProfile.userID
        );
      }

      if (conversation.type === "GROUP") {
        return (
          conversation.groupProfile.name || conversation.groupProfile.groupID
        );
      }
    },

    setConversationAvatarHandler(conversation) {
      if (conversation.type === "@TIM#SYSTEM") {
        return "https://web.sdk.qcloud.com/component/TUIKit/assets/system.png";
      }

      if (conversation.type === "C2C") {
        return (
          conversation.userProfile.avatar ||
          "https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/component/TUIKit/assets/avatar_21.png"
        );
      }

      if (conversation.type === "GROUP") {
        return (
          conversation.groupProfile.avatar ||
          "/static/static/assets/gruopavatar.svg"
        );
      }
    },

    deleteConversation() {
      uni.showModal({
        content: "确认删除会话？",
        success: (res) => {
          if (res.confirm) {
            uni.$TUIKit.deleteConversation(this.conversation.conversationID);
            this.setData({
              conversation: {},
              xScale: 0,
            });
          }
        },
      });
    },

    handleTouchMove(e) {
      if (!this.lock) {
        this.last = e.detail.x;
        this.lock = true;
      }

      if (this.lock && e.detail.x - this.last < -5) {
        this.setData({
          xScale: -75,
        });
        setTimeout(() => {
          this.lock = false;
        }, 2000);
      } else if (this.lock && e.detail.x - this.last > 5) {
        this.setData({
          xScale: 0,
        });
        setTimeout(() => {
          this.lock = false;
        }, 2000);
      }
    },
    handleImageError() {
      this.setData({
        conversationAvatar: "/static/static/assets/gruopavatar.svg",
      });
    },
  },
};
</script>
<style>
@import "./index.css";
</style>